<template>
  <div>
    <el-row>
      <el-col :span="24" class="father">
        <div class="i1" :style="{ order: orderList[0] }">
          <div class="i1-1 son">{{ items[0].value1 }}</div>
        </div>
        <div class="i2" :style="{ order: orderList[1] }">
          <div class="i2-1 son">{{ items[1].value1 }}</div>
        </div>
        <div class="i3" :style="{ order: orderList[2] }">
          <div class="i3-1 son">{{ items[2].value1 }}</div>
        </div>
        <div class="i4" :style="{ order: orderList[3] }">
          <div class="i4-1 son">{{ items[3].value1 }}</div>
        </div>
        <div class="i6" :style="{ order: orderList[5] }">
          <div class="i6-1 son">
            <img src="../../assets/wallhaven-48dg6o.png" alt="" />
          </div>
        </div>
        <div class="i5" :style="{ order: orderList[4] }">
          <div class="i5-1 son">{{ items[4].value1 }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, watch, onMounted, computed } from "vue";
const items = ref([
  { value1: 1 },
  { value1: 19 },
  { value1: 3 },
  { value1: 9 },
  { value1: 5 },
  { value1: 6 },
]);

// 生成每个元素的 order 值
const orderList = computed(() => {
  // 1. 提取前四个元素并保留原始索引
  const firstFour = items.value.slice(0, 4).map((item, index) => ({
    ...item,
    originalIndex: index,
  }));
  // 2. 按 value1 排序
  firstFour.sort((a, b) => a.value1 - b.value1);
  // 3. 初始化 order 数组，后两个固定为 5 和 6
  const orders = [5, 5, 5, 5, 5, 6];
  // 4. 为排序后的前四个元素分配 1~4 的 order 值
  firstFour.forEach((item, index) => {
    orders[item.originalIndex] = index + 1;
  });
  return orders;
});
</script>

<style lang="scss" scoped>
.father {
  width: 100%;
  background-color: aqua;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  .i1,
  .i2,
  .i3,
  .i4,
  .i5,
  .i6 {
    width: 100%;
    height: 200px;
    // background-color: brown;
    margin: 10px 5px;
    flex: 1 0 auto;
    width: 31.33%; // 3列 + 2% 间距
    margin: 10px 1%; // 调整间距
  }
  .i5 {
    // width: 100%;
    // height: 100px;
    transition: filter 0.3s ease;
    background: linear-gradient(
      to top,
      rgb(255, 255, 255) 0%,
      rgb(0, 0, 0) 100%
    );
    // mask-size: 100% 100%;
  }
  .son {
    flex: 1 0 auto;
    width: 100%;
    // background-color: aquamarine;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%) brightness(2);
      transition: filter 0.3s ease;
      mask-image: linear-gradient(to top, transparent 0%, black 100%);
      mask-size: 100% 70%;
      mask-repeat: no-repeat;
    }
  }
}
</style>
